﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Master/Default.Master" AutoEventWireup="true"
    CodeBehind="MainPage.aspx.cs" Inherits="Qianwei.Web.MainPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript">
        $(document).ready(function () {
            var imgDivs = $("#photoShow>div");
            var imgNums = imgDivs.length; //图片数量
            var divWidth = parseInt($("#photoShow").css("width")); //显示宽度
            var imgWidth = parseInt($(".photo>img").css("width")); //图片宽度
            var minWidth = (divWidth - imgWidth) / (imgNums - 1); //显示其中一张图片时其他图片的显示宽度
            var spanHeight = parseInt($("#photoShow>.photo:first>span").css("height")); //图片介绍信息的高度
            imgDivs.each(function (i) {
                $(imgDivs[i]).css({ "z-index": i, "left": i * (divWidth / imgNums) });
                $(imgDivs[i]).hover(function () {
                    //$(this).find("img").css("opacity","1");
                    $(this).find("span").stop().animate({ bottom: 0 }, "slow");
                    imgDivs.each(function (j) {
                        if (j <= i) {
                            $(imgDivs[j]).stop().animate({ left: j * minWidth }, "slow");
                        } else {
                            $(imgDivs[j]).stop().animate({ left: (j - 1) * minWidth + imgWidth }, "slow");
                        }
                    });
                }, function () {
                    imgDivs.each(function (k) {
                        //$(this).find("img").css("opacity","0.7");
                        $(this).find("span").stop().animate({ bottom: -spanHeight }, "slow");
                        $(imgDivs[k]).stop().animate({ left: k * (divWidth / imgNums) }, "slow");
                    });
                });
            });

            $(".photo").click(function () {
                window.location.href = $(this).attr("hhref");
            }).css("cursor", "pointer");
        });

        function setTab(name, cursel, n) {
            for (i = 1; i <= n; i++) {
                var menu = document.getElementById(name + i);
                var con = document.getElementById("con_" + name + "_" + i);
                menu.className = i == cursel ? "hover" : "";
                con.style.display = i == cursel ? "block" : "none";
            }
        }
    </script>
    <style type="text/css">
        #product
        {
            height: 254px;
        }
        #photoShow
        {
            background: none repeat scroll 0 0 #C5E88E;
            border: 1px solid #C5E88E;
            height: 254px;
            overflow: hidden;
            position: absolute;
            width: 1000px;
        }
        .photo
        {
            position: absolute;
            top: 0px;
            width: 490px;
            height: 254px; /*float: left;*/
        }
        .photo img
        {
            width: 490px;
            height: 254px;
        }
        .photo span
        {
            padding: 5px 0px 0px 5px;
            width: 490px;
            height: 30px;
            position: absolute;
            left: 0px;
            bottom: -32px; /*介绍内容开始的时候不显示*/
            background: black;
            filter: alpha(opacity=50); /*IE透明*/
            opacity: 0.5; /*FF透明*/
            color: #FFFFFF;
        }
        #content
        {
            margin-top: 5px;
        }
        #e_port, #news, #qianwei_intro, #qianwei_growth
        {
            background: none repeat scroll 0 0 #FFFFFF;
            float: left;
            width: 400px;
            margin-top: 10px;
            height: 280px;
            overflow: hidden;
        }
        #news, #e_port
        {
            margin-left: 10px;
        }
        .main_swf
        {
            float: left;
            width: 100%;
        }
        .e_title
        {
            background: url(Images/title_bg.jpg) repeat scroll 100% 0 transparent;
            color: #000;
            overflow: hidden;
            padding-left: 10px;
            font-weight: bolder;
            height: 30px;
            line-height: 30px;
        }
        .e_content
        {
            padding: 9px 9px 15px;
        }
        .e_content a:link, a:visited, a:hover, a:active
        {
            color: #000;
        }
        .e_content ul li
        {
            background: url("Images/dot_title_list.gif") no-repeat scroll left 6px transparent;
            margin: 1px 0px 4px;
            padding-left: 8px;
        }
        .sdetail
        {
            color: Red;
            font-size: 12px;
            font-weight: bold;
            padding: 10px 0px 5px 0px;
            margin-left: 300px;
            text-decoration: none;
        }
        #piclist
        {
            width: 100%;
            margin: 0px;
            padding: 0px;
            margin: 0 auto;
            overflow: auto;
            margin-top: 10px;
        }
        .TabMenubox
        {
            width: 460px;
            background: url(images/tab_bg.gif);
            background-repeat: no-repeat;
            height: 28px;
            line-height: 28px;
            float: left;
        }
        .TabMenubox ul
        {
            margin: 0px;
            padding: 0px;
        }
        .TabMenubox li
        {
            float: left;
            display: block;
            cursor: pointer;
            width: 114px;
            text-align: center;
            color: #949694;
            font-weight: bold;
            font-size: 16px;
            font-weight: 700;
        }
        .TabMenubox li.hover
        {
            padding: 0px;
            background: #fff;
            width: 116px;
            border-left: 1px solid #A8C29F;
            border-top: 1px solid #A8C29F;
            border-right: 1px solid #A8C29F;
            background: url(images/tab_on.gif);
            color: #739242;
            font-weight: bold;
            height: 27px;
            line-height: 27px;
        }
        .TabContentbox
        {
            clear: both;
            margin-top: 0px;
            border: 1px solid #A8C29F;
            border-top: none;
            text-align: center;
            padding-top: 8px;
        }
        .TabContentbox div
        {
            height: 560px;
            overflow: hidden;
        }
        .TabContentbox div dl
        {
            float: left;
            height: 170px;
            margin: 0;
            padding: 10px 0 2px;
            text-align: center;
            width: 33%;
        }
        .TabContentbox div dd
        {
            height: 160px;
            margin-left: 0;
        }
        .TabContentbox div dt
        {
            color: #999999;
            font-size: 12px;
            height: 29px;
            overflow: hidden;
            position: relative;
            width: 100%;
        }
        .TabContentbox div img
        {
            width: 255px;
            height: 160px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="product">
        <div id="photoShow">
            <asp:Literal ID="lphotos" runat="server"></asp:Literal>
        </div>
    </div>
    <div id="content">
        <div id="main_content_left">
            <div class="main_swf">
                <embed src="images/tel.swf" width="100%" align="center" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
                    type="application/x-shockwave-flash"></embed>
            </div>
            <div class="main_swf">
                <embed src="images/banner.swf" width="100%" type="application/x-shockwave-flash"
                    pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" wmode="transparent"
                    value="transparent"></embed>
            </div>
            <img src="images/kfzx.jpg" class="main_swf" onclick="window.open('http://wpa.qq.com/msgrd?v=3&uin=18224861&site=qq&menu=yes');"
                style="cursor: pointer;" />
        </div>
        <div id="main_content_right">
            <div id="qianwei_intro">
                <div class="content_title">
                    <div class="title_text">
                        千威概况</div>
                </div>
                <div class="content_body">
                    <asp:Literal ID="lqian_intro" runat="server"></asp:Literal>
                    <div class="sdetail">
                        <a href="Introduction.aspx" target="_blank">详情点击...</a></div>
                </div>
            </div>
            <div id="news">
                <div class="content_title">
                    <div class="title_text">
                        公司动态</div>
                </div>
                <div class="content_body e_content">
                    <asp:Literal ID="lcompanynews" runat="server"></asp:Literal>
                </div>
            </div>
            <div id="qianwei_growth">
                <div class="content_title">
                    <div class="title_text">
                        成长历程</div>
                </div>
                <div class="content_body">
                    <asp:Literal ID="lqian_growth" runat="server"></asp:Literal>
                    <div class="sdetail">
                        <a href="GrowthCourse.aspx" target="_blank">详情点击...</a></div>
                </div>
            </div>
            <div id="e_port">
                <div class="content_title">
                    <div class="title_text">
                        外部报道</div>
                </div>
                <div class="content_body e_content">
                    <asp:Literal ID="lexterreport" runat="server"></asp:Literal>
                </div>
            </div>
            <div style="clear: both;">
            </div>
            <div id="piclist">
                <div class="TabMenubox">
                    <ul>
                        <li id="one1" onmouseover="setTab('one',1,4)">千威月饼</li>
                        <li id="one2" onmouseover="setTab('one',2,4)">千威粽子</li>
                        <li id="one3" onmouseover="setTab('one',3,4)">千威年货</li>
                        <li id="one4" onmouseover="setTab('one',4,4)">产品套装</li>
                    </ul>
                </div>
                <div style="border-bottom: 1px solid #A8C29F; float: left; width: 350px; height: 27px;
                    overflow: hidden;">
                </div>
                <div class="TabContentbox">
                    <div id="con_one_1">
                        <asp:Literal ID="lmooncake" runat="server"></asp:Literal>
                    </div>
                    <div id="con_one_2" style="display: none">
                        <asp:Literal ID="lDumpling" runat="server"></asp:Literal>
                    </div>
                    <div id="con_one_3" style="display: none">
                        <asp:Literal ID="lNewYear" runat="server"></asp:Literal>
                    </div>
                    <div id="con_one_4" style="display: none">
                        <asp:Literal ID="lSuit" runat="server"></asp:Literal>
                        <%--<dl>
                            <dd>
                                <a target="_blank" href="MoonCake.aspx?pid=2"><img alt="" src="/PictureMin/166386_950.jpg" /></a>
                            </dd>
                            <dt>你见过这样的菊花吗 </dt>
                        </dl>--%>
                    </div>
                </div>
            </div>
        </div>
        <div style="clear: both;">
        </div>
    </div>
    <script type="text/javascript">
        setTab('one', 1, 4);
    </script>
</asp:Content>
